<template>
  <!-- 用户列表 begin -->
  <div class="main" id="main_payment_bills">
    <div class="main-hd">
      <h2>{{ $t("m.ul") }}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap" id="VuePayment_content">
        <div class="form-inline" style="margin-bottom: 30px;">
          <!-- 筛选条件 begin -->
          <div>
            <div class="items">
              <div class="label">{{$t('m.userNumber')}}</div>
              <Input type="text" class="ivu-input-w200" v-model="reqId" :placeholder="$t('m.userNumber')" />
            </div>
            <div class="items">
              <div class="label">{{$t('m.userName')}}</div>
              <Input type="text" class="ivu-input-w200" v-model="name" v-bind:placeholder="$t('m.userName')" />
            </div>
            <div class="items">
              <div class="label">{{$t('m.Account')}}</div>
              <Input type="text" class="ivu-input-w200" v-model="phone" v-bind:placeholder="$t('m.Account')" />
            </div>
            <div class="items">
              <div class="label">{{$t('m.in')}}</div>
              <Input type="text" class="ivu-input-w200" v-model="idNumber" v-bind:placeholder="$t('m.in')" />
            </div>
            <div class="items">
              <div class="label">{{$t('m.zhengjianleixing')}}</div>
              <Select v-model="credentialType" class="ivu-input-w200" :placeholder="this.$t('m.zhengjianleixing')">
                <Option :value="''">{{ $t("m.entire") }}</Option>
                <Option :value="'Company ID'">Company ID</Option>
                <Option :value="'Driver’s License'">Driver’s License</Option>
                <Option :value="'Government Service Insurance System (GSIS) e-Card'">Government Service Insurance System (GSIS) e-Card</Option>
                <Option :value="'GSIS ID'">GSIS ID</Option>
                <Option :value="'IBP ID (Integrated Bar of the Philippines)'">IBP ID (Integrated Bar of the Philippines)</Option>
                <Option :value="'OWWA ID (Overseas Workers Welfare Administration)'">OWWA ID (Overseas Workers Welfare Administration)</Option>
                <Option :value="'Passport'">Passport</Option>
                <Option :value="'Postal ID'">Postal ID</Option>
                <Option :value="'PRC ID (Professional Regulation Commission)'">PRC ID (Professional Regulation Commission)</Option>
                <Option :value="'School ID'">School ID</Option>
                <Option :value="'Senior Citizen ID'">Senior Citizen ID</Option>
                <Option :value="'SSS ID (Social Security System)'">SSS ID (Social Security System)</Option>
                <Option :value="'TIN ID (Taxpayer Identification Number)'">TIN ID (Taxpayer Identification Number)</Option>
                <Option :value="'UMID (Unified Multi-Purpose ID)'">UMID (Unified Multi-Purpose ID)</Option>
                <Option :value="'Voter s ID'">Voters ID</Option>
              </Select>
            </div>
            <div class="items">
              <div class="label">{{$t('m.dd1')}}</div>

              <Select v-model="hasIdentified" class="ivu-input-w200" v-bind:placeholder="$t('m.dd1')">
                <Option :value="''">{{ $t("m.entire") }}</Option>
                <Option :value="'toapply'">{{
                  $t("m.dàiyònghùtíjiāoshēnqǐng")
                }}</Option>
                <Option :value="'none'">{{ $t("m.dd2") }}</Option>
                <Option :value="'submitting'">{{ $t("m.dd3") }}</Option>
                <Option :value="'checking'">{{ $t("m.dd4") }}</Option>
                <Option :value="'pass'">{{ $t("m.pass") }}</Option>
                <Option :value="'reject'">{{ $t("m.refuse") }}</Option>
              </Select>
            </div>
            <div class="items">
              <div class="label">{{$t('m.loanCount')}}</div>
              <Select v-model="loanCount" class="ivu-input-w200" :placeholder="this.$t('m.loanCount')">
                <Option :value="''">{{ $t("m.entire") }}</Option>
                <Option :value="'0'">0</Option>
                <Option :value="'1'">1~3</Option>
                <Option :value="'2'">4~6</Option>
                <Option :value="'3'">6~~</Option>
              </Select>
            </div>
            <div class="items">
              <div class="label">{{$t('m.overdueState')}}</div>
              <Select v-model="isYuqi" class="ivu-input-w200" v-bind:placeholder="$t('m.overdueState')">
                <Option :value="''">{{ $t("m.entire") }}</Option>
                <Option :value="'0'">{{ $t("m.overdueState0") }}</Option>
                <Option :value="'1'">{{ $t("m.overdueState1") }}</Option>
              </Select>
            </div>
            <div class="items">
              <div class="label">{{$t('m.lockState')}}</div>
              <Select v-model="isFreeze" class="ivu-input-w200" v-bind:placeholder="$t('m.lockState')">
                <Option :value="''">{{ $t("m.entire") }}</Option>
                <Option :value="'1'">{{ $t("m.yes") }}</Option>
                <Option :value="'0'">{{ $t("m.no") }}</Option>
              </Select>
            </div>
            <div class="items">
              <div class="label">{{$t('m.registeTime')}}</div>
              <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" v-bind:placeholder="$t('m.registeTime')" class="ivu-input-w200"></DatePicker>
            </div>
            <br>
            <div style="margin-top:20px;">
              <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
              <Button class="parameter_button" type="primary" @click="handleFileterReset">{{$t('m.cháxún')}}</Button>

            </div>
          </div>
        </div>
        <!-- 筛选条件 end -->
        <!-- 用户列表 begin -->
        <Table border :columns="userListTable" :data="userListByCondition">
          <template slot-scope="{ row, index }" slot="phone">
            <Poptip trigger="hover" placement="right">
              <div style="width: 600px;text-align: center" slot="content">
                <table>
                  <thead>
                    <tr>
                      <th style="text-align: center">{{$t('m.shǒujīxínghào')}}</th>
                      <th style="text-align: center">{{$t('m.shoujixitongbanben')}}</th>
                      <th style="text-align: center">{{$t('m.xiǎnshìpíngtái')}}</th>
                      <th style="text-align: center">{{$t('m.Xìtǒngbǎnběn')}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td style="text-align: center">{{ row.deviceModel }}</td>
                      <td style="text-align: center">{{ row.appVersion }}</td>
                      <td style="text-align: center">{{ row.platform }}</td>
                      <td style="text-align: center">{{ row.osVersion }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p :style="
                      row.isBlack === 0
                        ? 'color:black;text-decoration: underline'
                        : 'color:#FA7372;text-decoration: underline'
                    ">
                {{ row.phone }}
              </p>
            </Poptip>
          </template>
          <template slot-scope="{ row, index }" slot="numberLoans">
            <p class="row_p" @click="order(row.phone)">{{row.numberLoans}}</p>
          </template>
          <template slot-scope="{ row, index }" slot="dueCount">
            <p class="row_p" @click="order(row.phone,row.dueCount)">{{row.dueCount}}</p>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button size="small" class="ivu-btn-success ivu-btn-long ivu-btn-small" @click="getBankInfo(row.id,row.orderGid);">{{ $t("m.userDetails") }}</Button>
            <Button size="small" class="ivu-btn-primary ivu-btn-long ivu-btn-small" @click="handleSetting(row.id,row.isForbidMoney,row.hasIdentified,row.loanProductNo,row.isBlack)">{{ $t("m.setting") }}</Button>
          </template>
        </Table>
        <!-- <div class="list" id="userListByCondition_list">


          <table class="table table-hover table-condensed" id="userListByCondition_list_table" border>
            <thead>
              <tr>
                <td class="td_style">{{ $t("m.userNumber") }}</td>
                <td class="td_style">{{ $t("m.userName") }}</td>
                <td class="td_style">{{ $t("m.Account") }}</td>
                <td class="td_style">{{ $t("m.checkState") }}</td>
                <td class="td_style">{{ $t("m.taob") }}</td>
                <td class="td_style">{{ $t("m.loanCount") }}</td>
                <td class="td_style">{{ $t("m.yuqibishu") }}</td>
                <td class="td_style">{{ $t("m.registeTime") }}</td>
                <td class="td_style">{{ $t("m.passingt") }}</td>
                <td class="td_style" v-show="
                    adminType == 0 || adminType == 1 || adminType == 'admin'
                  ">
                  {{ $t("m.operate") }}
                </td>
              </tr>
            </thead>
            <tr v-for="item in userListByCondition">
              <td>{{ item.id }}</td>
              <td :style="item.isBlack === 0 ? 'color:black' : 'color:#FA7372'">
                {{ item.fullName }}
              </td>
              <td>
                <Poptip trigger="hover">
                  <div style="width: 600px;text-align: center" slot="content">
                    <table>
                      <thead>
                        <tr>
                          <th style="text-align: center">Device Model</th>
                          <th style="text-align: center">App Version</th>
                          <th style="text-align: center">Platform</th>
                          <th style="text-align: center">OS Version</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>{{ item.deviceModel }}</td>
                          <td>{{ item.appVersion }}</td>
                          <td>{{ item.platform }}</td>
                          <td>{{ item.osVersion }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p :style="
                      item.isBlack === 0
                        ? 'color:black;text-decoration: underline'
                        : 'color:#FA7372;text-decoration: underline'
                    ">
                    {{ item.phone }}
                  </p>
                </Poptip>
              </td>
              <td>{{ item.statusCredit }}</td>
              <td>{{ item.loanLimit }}</td>
              <td>
                <Poptip><a @click="order(item.phone)" style="text-decoration: underline">{{ item.numberLoans }}</a></Poptip>
              </td>
              <td>
                <a @click="order(item.phone, item.dueCount)" style="text-decoration: underline">
                  {{ item.dueCount }}</a>
              </td>
              <td>{{ item.ctime }}</td>
              <td>{{ item.timePass }}</td>
              <td class="pt6 pb6">
                <Button class="btn-detail" type="primary" @click="
                    getBankInfo(item.id,item.orderGid);
                  ">{{ $t("m.detail") }}</Button>
                <Button class="btn-setting" type="success" @click="
                    handleSetting(
                      item.id,
                      item.isForbidMoney,
                      item.hasIdentified,
                      item.loanProductNo,
                      item.isBlack
                    )
                  ">{{ $t("m.setting") }}</Button>
              </td>
            </tr>
          </table>
        </div> -->

        <div style="float: right;margin-top:20px;text-align: right;">
          <!-- <span class="kkpager_totalSize">共有{{loan_list_size}}条数据</span> -->
          <Page :total="loan_list_size" :current.sync="page" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="pageChange" @on-page-size-change="handleSizeChange" style="margin: 15px 0;"></Page>
        </div>
        <!-- 用户列表 end -->

        <!--用户详细资料end-->
        <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
          <base-info :userId="baseInfoUserId" :orderGid="baseInfoOrderGid" :baseType="baseInfoType" v-if="baseInfoBox"></base-info>
          <div slot="footer"></div>
        </Modal>

        <!-- 借款笔数弹出层 end -->
      </div>
      <Modal width="1200px" v-model="orderlist" footer-hide>
        <h4 class="modal-title">{{ $t("m.dd1") }}</h4>
        <Table highlight-row border :columns="ordercol" :data="orderData" act></Table>
      </Modal>
      <!--       用户设置：有待添加拉黑功能和补充用户资料功能-->
      <Modal v-model="setModal" v-bind:title="$t('m.setting')">
        <Tabs @on-click="change" class="paymentBills_box">
          <Tab-pane name="adduserInfo" v-bind:label="$t('m.addUserinfo')">
            <Form ref="adduserInfo" :model="adduserInfo" :rules="addRules" :label-width="120">
              <FormItem :label="$t('m.remark')" prop="remark">
                <Input :placeholder="$t('m.addRemark')" v-model="adduserInfo.remark">
                </Input>
              </FormItem>
              <FormItem label="upload certificate" prop="uploadLists">
                <span slot="label" class="ivu-form-label">
                  {{ $t("m.uploadE") }}
                  <Poptip trigger="hover" placement="right">
                    <Icon type="ios-help-circle" size="15"></Icon>
                    <div slot="content" style="text-align:left;">
                      <p>{{ $t("m.rOne") }}</p>
                      <p>{{ $t("m.rTwo") }}</p>
                    </div>
                  </Poptip>
                </span>
                <Upload ref="upload" :show-upload-list="false" :format="['jpg', 'jpeg', 'png']" :before-upload="handleBeforeUpload" accept="image/jpeg,image/png" action="">
                  <Button icon="ios-cloud-upload-outline" :loading="btnLoading">{{ $t("m.scImg") }}</Button>
                </Upload>
                <div class="priview" style="margin-top:20px;">
                  <img :src="adduserInfo.info" alt="" class="priview-image" />
                </div>
              </FormItem>
            </Form>
          </Tab-pane>
          <Tab-pane name="black" :label="curBlackStatus == 0 ? $t('m.addBlack') : $t('m.yíchūhēimíngdān')">
            <div v-if="curBlackStatus == 0" style="margin-top:10px;">
              <span style="width:24%;display: inline-block;text-align: right; margin-right: 5%;"><i style="color:red;margin-right:3px;">*</i>{{$t('m.black')}}{{$t('m.bèizhù')}}</span>
              <Input :placeholder="$t('m.addRemark')" v-model="addRemark" style="width:70%;">
              </Input>
            </div>
            <div v-else style="margin-top:10px;color: red; margin-left: 20px;">
              {{ $t('m.shure')+ $t('m.yíchūhēimíngdān')}}?
            </div>
          </Tab-pane>
        </Tabs>
        <div slot="footer">
          <Button type="text" size="large" @click="handleSettingCancel">{{$t('m.cancel')}}</Button>
          <Button type="primary" size="large" @click="handleSettingConfirm" :loading="btnLoading">{{$t('m.right')}}</Button>
        </div>
      </Modal>
    </div>
  </div>
  <!-- 用户列表 end -->
</template>

<script>
import lrz from 'lrz';
import mixin from '../libs/mixins.js';
import BaseInfo from './common/baseInfo'
export default {
  mixins: [mixin],
  components: {
    BaseInfo
  },
  data () {
    const isEqual = (rule, value, callback) => {
      const {
        newPassword
      } = this.passForm;
      if (value !== newPassword) return callback(new Error('两次输入的密码不一致'));
      callback();
    }
    return {
      deg: 0,
      zhuand: 0,
      addRemark: "",
      data110: [{}],
      data120: [{}],
      baseInfoBox: false,
      baseInfoType: '1',


      columns22: [{
        title: '公用的身份证手机号',
        key: 'phone'
      },],
      data22: [{
        phone: '',

      },],
      // ----------
      useriii: '',
      userListTable: [{
        title: this.$t('m.userNumber'),
        key: 'id',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.userName'),
        key: 'fullName',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.Account'),
        // key: 'phone',
        slot: 'phone',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.checkState'),
        key: 'statusCredit',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.taob'),
        key: 'loanLimit',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.loanCount'),
        slot: 'numberLoans',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.yuqibishu'),
        slot: 'dueCount',
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.registeTime'),
        key: 'ctime',
        sortable: true,
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.passingt'),
        key: 'timePass',
        sortable: true,
        width: 200,
        align: 'center'
      },
      {
        title: this.$t('m.operate'),
        slot: 'action',
        width: 150,
        fixed: 'right',
        align: 'center'
      },
      ],
      ordercol: [{
        title: this.$t('m.OrderGid'),
        key: 'orderGid'
      },
      {
        title: this.$t('m.LoanDate'),
        key: 'timeOrder'
      },
      {
        title: this.$t('m.LoanAmount'),
        key: 'loanAmount'
      },
      {
        title: this.$t('m.LoanDay'),
        key: 'loanDays'
      },
      {
        title: this.$t('m.PaybackDate'),
        key: 'dueDate'
      },
      {
        title: this.$t('m.ServiceCharge'),
        key: 'serviceFee'
      },
      {
        title: this.$t('m.Interest'),
        key: 'interest'
      },
      {
        title: this.$t('m.InterestPenalties'),
        key: 'interestFine'
      },
      {
        title: this.$t('m.TransferStatus'),
        key: 'statusLoan',
        render: (h, params) => {
          const {
            paymentStatus
          } = params.row;
          return h('span', this.loadStateArr[paymentStatus]);
        }
      }
      ],
      loadStateArr: {
        'paying': this.$t('m.paying'),
        'paySuccess': this.$t('m.dǎkuǎnchénggōng'),
        'payFail': this.$t('m.dǎkuǎnshībài'),
        'payCancel': this.$t('m.guānbìdǎkuǎn')
      },
      // deviceModel:'1',
      // platform:'1',
      // osVersion:'1',

      orderlist: false,
      btnLoading: false,
      bankinfo: [],
      name: '',
      phone: '',
      data122: '',
      hasIdentified: '',
      userId: '',
      id: '',
      loanCount: 0,
      userListByCondition: [], //用户列表
      userCreditOrdersList: [], //借款笔数
      userYuqiCreditOrdersList: {}, //逾期查询
      platformList: [],
      reqId: '',
      idNumber: '',
      credentialType: '',
      hasIdentifiedArr: ['未提交申请', '申请成功', '人工审核中', '机审不通过', '人工审核不通过', '驳回', '资料提交中'],
      platformId: -1,
      loanStateArr: ['待审核', '待打款', '审核失败', '已打款', '不打款'],
      isYuqi: '',
      isFreeze: '',
      limitMoney: -1,
      blackStatus: -1,
      beginDate: '',
      endDate: '',
      beginPassDate: '',
      endPassDate: '',
      modalType: 0,
      loan_list_size: 0,
      disDate: {},
      loan_list_page: 1,
      loading: true,
      setModal: false,
      tabState: 'adduserInfo',
      modalId: '',
      modalFreeze: '',
      adminType: sessionStorage.roles,
      level: sessionStorage.level,
      orderId: '',
      identifyList: [],
      magnifyImgUri: '',
      //baseinfo
      userIdentiInfo: [],
      //creditinfo
      userIdentiInfo2: [],
      userCreditInfo: [],
      contactInfo: [],
      submitMessage: '',
      money: 500,
      inputMoney: '',
      collapseModel: '',
      picInfo: {},
      remarkInfo: {},
      checkLogList: [],
      callLog: [], //通话记录
      mobileInfo: {
        emergency: [],
        monthly: [],
        contacts_overdue: [],
        single_overdue: [],
        user_portrait: {
          contacts_distribution: {},
          silent_days: {},
          night_activities: {}
        },
        special_cate: []
      },
      page: 1,
      pageSize: 10,
      investorId: -1,
      investorList: [],
      loanProductNo: 'all',
      loanProductNoList: [],
      curIdentified: '', // 当前选中的item，hasIdentified
      curBlackStatus: '', // 当前选中的item, blackStatus
      curLoanProductNoList: '', // 当前产品配置list
      productForm: {
        loanProductNo: ''
      },
      adduserInfo: {
        remark: '',
        info: '',
        uploadLists: []
      },
      uploadList: [],
      uploadStatus: '',
      uploadPending: false,
      uploadPercent: 0,
      previewProofImgs: false, // 详情查看凭证弹窗
      proofImgsArr: [], // 详情查看凭证图片数组
      addRules: {
        remark: [{
          required: true,
          message: 'remark can not be empty',
          trigger: 'blur'
        }],
        uploadLists: [{
          required: true,
          type: 'array',
          min: 1,
          message: '请上传还款凭证',
          trigger: 'change'
        }],
      },
      userIdentiInfo3: [],
      orderData: []
    }
  },
  mounted: function () {
    if (this.adminType == 2) {
      this.tabState = 'forbid';
    }
    this.getUserListByCondition();


  },
  computed: {},
  methods: {
    // 重置
    emptyQueryInfo () {
      this.reqId = ''
      this.name = ''
      this.phone = ''
      this.idNumber = ''
      this.credentialType = ''
      this.hasIdentified = ''
      this.loanCount = ''
      this.isYuqi = ''
      this.isFreeze = ''
      this.beginDate = ''
      this.endDate = ''
    },


    //用户信息详情中的功能
    getBankInfo (userId, orderGid) {
      this.baseInfoBox = true
      this.baseInfoUserId = userId
      this.baseInfoOrderGid = orderGid
    },
    //获取用户列表
    getUserListByCondition: function (page) {

      let param = {},
        query = '';
      param.pageSize = this.pageSize
      param.pageNumber = this.page
      param.fullName = this.name
      param.phone = this.phone
      param.creditStatus = this.hasIdentified
      param.loanCount = this.loanCount
      param.dueStatus = this.isYuqi
      param.isBlack = this.isFreeze
      param.registerDateBegin = this.beginDate
      param.registerDateEnd = this.endDate
      param.userId = this.reqId
      param.idNumber = this.idNumber
      param.credentialType = this.credentialType


      // var id = this.userId
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      var url1 = `/api/laocai/user/list?${query}`
      this.$http.get(url1).then((res) => {
        if (res.body.code == 0) {
          var ress = res.body.result.list
          ress.forEach((val, index, val_arr) => {
            switch (val_arr[index].statusCredit) {
              case 'toapply':
                val_arr[index].statusCredit = this.$t('m.dàiyònghùtíjiāoshēnqǐng')
                break;
              case 'none':
                val_arr[index].statusCredit = this.$t('m.dd2')
                break;
              case 'submitting':
                val_arr[index].statusCredit = this.$t('m.dd3')
                break;
              case 'checking':
                val_arr[index].statusCredit = this.$t('m.dd4')
                break;
              case 'pass':
                val_arr[index].statusCredit = this.$t('m.pass')
                break;
              case 'reject':
                val_arr[index].statusCredit = this.$t('m.refuse')
                break;
              default:
                break;
            }

          });
          this.userListByCondition = ress;
          this.loan_list_size = res.body.result.size
          self.loading = false;
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },
    order (phone, dueStatus) {

      this.orderlist = true
      this.$http.get('/api/laocai/order/list?phone=' + phone + '&' + 'dueStatus=' + dueStatus).then((res) => {
        if (res.body.code == 0) {
          this.orderData = res.body.result.list
          // alert(this.bankinfo)
          // this.data1=res.body.result.baseInfo
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
    magnifyImgEvent (url) {
      this.magnifyImgUri = url
    },
    noMagnifyImgEvent () {
      this.magnifyImgUri = null
    },
    handleSuccess () {
      this.uploadPending = false;
      this.uploadStatus = 'finished'

    },
    queryBankinfo () {
      var url2 = '/api/laocai/user/bankcard?userId=' + this.userId;
      this.$http.get(url2) //银行卡信息
        .then((res) => {
          if (res.body.code == 0) {
            this.bankinfo = res.body.result
            // alert(this.bankinfo)
            // this.data1=res.body.result.baseInfo
          } else {
            this.$Message.success(this.$t('m.errorCode' + res.body.code));
          }
        });

    },
    handleBeforeUpload (file) {
      const reg = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
      const limit5 = file.size / 1024 / 1024 < 1;
      const check = this.uploadList.length < 1;

      if (!reg.test(file.type)) {
        this.$Message.error('Only can update: jpg, jpeg, png');
        return false;
      }
      if (!limit5) {
        this.$Message.error('Max Size<=1MB');
        return false;
      }
      if (!check) {
        this.$Message.error('Only Can Update 1 Picture');
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        let result = e.target.result;

        this.adduserInfo.info = result
      }

      reader.onerror = (e) => {
        this.$Message.error('base64 Error');
      }

      return false;

      // 压缩图片

    },
    timeChange (e) {
      if (typeof (e) == "undefined") {
        this.beginDate = e[0];
      } else if (typeof (e) == "object") {
        this.beginDate = e[0];
        this.endDate = e[1];
        this.page = 1;
        this.getUserListByCondition();
      }
    },
    pageChange (e) {
      this.page = e;
      this.getUserListByCondition();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getUserListByCondition();
    },
    handleSettingCancel () {
      const {
        passForm,
        productForm
      } = this.$refs;
      if (passForm) {
        passForm.resetFields();
      }
      if (productForm) {
        productForm.resetFields();
      }
      this.setModal = false;

    },
    handleSettingConfirm () {
      this.btnLoading = true
      let param = {};
      param.userId = this.modalId;
      if (this.tabState == 'adduserInfo') {
        if (this.adduserInfo.remark == '') {
          // alert('remark info can not be empty')
          return
        }
        this.$http.post('/api/laocai/user/miscResources', {
          userId: this.modalId,
          remark: this.adduserInfo.remark,
          info: this.adduserInfo.info
        }).then((res) => {
          this.btnLoading = false
          if (res.body.code == 0) {
            this.setModal = false
            this.$Message.success('success')
            this.$router.push('/blank');
            return
          } else {
            this.$Message.success(this.$t('m.errorCode' + res.body.code));
          }
          this.adduserInfo.remark = '';
        })

      } else if (this.tabState == 'black') { // heimingdan
        if (this.curBlackStatus == 0) {
          if (this.addRemark) {
            param.remark = this.addRemark
          } else {
            this.$Message.error(this.$t('m.qǐngshūrùbèizhù'));
            this.btnLoading = false;
            return
          }
        }
          this.$http.post('/api/laocai/user/black', param).then((res) => {
            this.btnLoading = false
            if (res.body.code == 0) {
              this.$Message.success(this.$t('m.operate') + this.$t('m.chénggōng'));
              setTimeout(() => {
                this.getUserListByCondition();
              }, 500);
            } else {
              this.$Message.error(this.$t('m.errorCode' + res.body.code));
            }
            this.addRemark = ''
            this.setModal = false;
          }, error => { });
      }
    },
    change (value) {
      this.tabState = value;
    },
    // duankou
    getCallLogInfo: function () {
      this.$http.get('/api/laocai/user/phonebook?userId=' + this.useriii).then((res) => {
        this.callLog = res.body
      })
    },
    Jsone (res) {
      var urljson = res.body.result.creditInfo.phoneBookUrl
      this.$http.get(urljson).then((res) => {
        // this.callLog=res.body
      });
    },
    // 获取产品列表
    handleFileterReset () {
      this.page = 1;
      this.getUserListByCondition();
    },
    /**
     * shezhianniu
     */
    handleSetting (id, isForbidMoney, hasIdentified, loanProductNo, isBlack) {
      this.modalId = id;
      this.modalFreeze = isForbidMoney;
      this.curIdentified = hasIdentified;
      this.curBlackStatus = isBlack;
      this.productForm.loanProductNo = loanProductNo;
      this.setModal = true;
      console.log(isBlack, "你是什么鬼")
    }
  },
  watch: { //检测v-model组件变化
    // reqId: function () {
    //   this.handleFileterReset();
    // },
    // name: function () {
    //   this.handleFileterReset();
    // },
    // phone: function () {
    //   this.handleFileterReset();
    // },

    // idNumber: function () {
    //   this.handleFileterReset();
    // },

    // credentialType: function () {
    //   this.handleFileterReset();
    // },

    // hasIdentified: function () {
    //   this.handleFileterReset();
    // },
    // platformId: function () {
    //   this.handleFileterReset();
    // },
    // loanCount: function () {
    //   this.handleFileterReset();
    // },
    // isYuqi: function () {
    //   this.handleFileterReset();
    // },
    // isFreeze: function () {
    //   this.handleFileterReset();
    // },
    // limitMoney: function () {
    //   this.handleFileterReset();
    // },
    // investorId () {
    //   this.handleFileterReset();
    // },
    // loanProductNo () {
    //   this.handleFileterReset();
    // },
    // blackStatus () {
    //   this.handleFileterReset();
    // }
  }
}
</script>

<style lang="scss" scoped>
@import "../static/style.css";
@import "../static/common.scss";
#userListByCondition_list {
  width: 100%;
  overflow: scroll;
}
.td_style {
  width: 200px;
}

.items {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
.one-color-num {
}
.two-color-num {
  transform: rotate(90deg);
}
.three-color-num {
  transform: rotate(180deg);
  transition: all 0.3s;
}
.four-color-num {
  transform: rotate(270deg);
  transition: all 0.3s;
}
#identify_person_list ul {
  margin: 0 10px;
}
#identify_person_list ul li {
  height: 35px;
}
.identify_photo_list_img {
  text-align: center;
}
.identify_photo_list_img span {
  font-weight: 700;
}
.identify_photo_list_img span i {
  font-weight: 700;
  cursor: pointer;
}
.pop-table h2 {
  line-height: 32px;
  font-weight: normal;
  text-align: left;
  padding: 0 10px;
}
.underline {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}
.picInfo {
  margin: 0 30px;
  text-align: center;
  min-height: 700px;
}
.picInfoLi {
  float: left;
  width: 50%;
  margin-top: 10px;
  height: 400px;
}
.picInfoLi a {
  width: 350px;
  height: 350px;
  display: block;
  display: flex;
  margin: auto;
}
.picInfoLi a span {
  margin: auto;
}
.picInfoLi img {
  max-height: 300px;
  width: 400px;
  margin: 40px 0;
  overflow: hidden;
  justify-items: center;
  align-items: center;
}
.picInfoLi p span {
  margin: 0 10px;
}
.picInfoLi p span i {
  font-weight: 700;
  transform: rotate(75deg);
  cursor: pointer;
}
.btn-wrapper {
  margin-top: 12px;
  text-align: right;
}
#paymentAllListContent {
  max-height: 330px;
  overflow: auto;
}
.btn-wrapper a:active,
.btn-wrapper a:hover,
.btn-wrapper a:visited {
  color: #ffffff;
}
.priview {
  margin-bottom: 10px;
  .priview-image {
    max-height: 60px;
  }
}
.zhuanzhuan {
  margin-bottom: 2px;
  position: relative;
}
.myid {
  display: block;
  width: auto;
  height: 34px;
  background: #0fd0ca;
  margin-top: 15px;
  color: white;
  border-radius: 10px;
  position: relative;
}
.myid:hover {
  background: #ff936f;
}

.paymentBills_box {
  padding: 0px 30px;
}
.paymentBills_box >>> .ivu-poptip-inner {
  white-space: inherit !important;
}

.baseInfo_box_title >>> .ivu-modal-header-inner {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}
.ivu-btn-long {
  margin: 5px 0;
}
.row_p {
  color: #2d8cf0;
  width: 100%;
  cursor: pointer;
}
</style>